<template>
  <div>
    <nav-bar>
      <template v-slot:default>购物车:{{$store.state.cartCount}}</template>
    </nav-bar>

    <div class="cart-box">
      <div class="cart-body">
        <van-checkbox-group ref="checkboxGroup" @change="groupChange" v-model="result">
          <van-swipe-cell :right-width="50" 
          v-for="(item,index) in list"
          :key="index"
          >
            <div class="good-item">
              <van-checkbox :name="item.id" />
              <div class="good-img">
                <img src="~assets/images/banner.webp" alt="" />
              </div>
              <div class="good-desc">
                <div class="good-title">
                  <span>{{item.goods.title}}</span>
                  <span>{{item.goods.stock}}</span>
                </div>
                <div class="good-btn">
                  <div class="price"><small>￥</small>{{item.goods.price.toFixed(2)}}</div>
                  <van-stepper
                    integer
                    :min="1"
                    :max="item.goods.stock"
                    :model-value="item.num"
                    :name="item.id"
                    async-change
                    @change="onChange"
                  />
                </div>
              </div>
            </div>
            <template #right>
              <van-button
                square
                icon="delete"
                type="danger"
                class="delete-button"
                @click="deleteGood(item.id)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox-group>
      </div>
      <van-submit-bar class="submit-all" :price="total*100" @submit="onsubmit" button-text="结算">
        <van-checkbox @click="allCheck" v-model:checked="checkAll">全选</van-checkbox>
      </van-submit-bar>
      <div class="empty" v-if="!list.length">
          <img class="empty-cart" src="~assets/images/shop.png" alt="空购物车">
          <div class="title">购物车空空如也</div>
          <van-button round color="#1baeae" type="primary" block @click="goTo">前往选购</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import navBar from "components/common/navbar/NavBar";
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {getCart,deleteCart,madifyCart,checkedCart} from 'network/cart.js'
import { onMounted, reactive, toRefs,computed } from 'vue';
import { Toast } from 'vant';
export default {
  components: {
    navBar,
  },
  setup(){
      const store= useStore()
      const router=useRouter()
      const state=reactive({
          list:[],
          result:[],
          checkAll:true
      })
    //   初始化购物车数据
      const init=()=>{
          Toast.loading({ message: '加载中...',forbidClick: true,})
           getCart('include=goods').then(res=>{
              console.log(res);
              state.list=res.data
              state.result=res.data.filter(n=>n.is_checked==1).map(item=>item.id)
              // console.log(state.result);
              Toast.clear()
          })
      }
      onMounted(()=>{
          init()
      })

      const total=computed(()=>{
        let sum=0
        state.list.filter(item=>state.result.includes(item.id))
        .forEach(item=>{
          sum+=parseInt(item.num)*parseFloat(item.goods.price)
        })
        return sum
      })
      const goTo=()=>{
          router.push({path:'/home'})
      }
      
    //   异步改变购物车数量
      const onChange=(value,detail)=>{
          Toast.loading({ message: '修改中...',forbidClick: true,})
          madifyCart(detail.name,{num:value}).then(res=>{
              state.list.forEach(item=>{
                  if(item.id==detail.name){
                      item.num=value
                  }
              })
              Toast.clear()
          })
      }

      const groupChange=(result)=>{
        if(result.length==state.list.length){
          state.checkAll=true
        }else{
          state.checkAll=false
        }
        console.log(result);
        state.result=result
        checkedCart({cart_ids:result})
      }
      const allCheck=()=>{
        if(!state.checkAll){
          state.result=state.list.map(item=>item.id)
          state.checkAll=true
        }else{
          state.result=[]
          state.checkAll=false
        }
      }
      const deleteGood=(id)=>{
          deleteCart(id).then(res=>{
            init()
            store.dispatch('updateCart')
            // console.log(res);
          })
      }
      const onsubmit=()=>{
        if(state.result.length==0){
          Toast.fail('请选择商品进行结算')
          return
        }else{
          router.push({path:'/createorder'})
        }
      }
      return{
         ...toRefs(state),
         goTo,
         onChange,
         groupChange,
         allCheck,
         deleteGood,
         total,
         onsubmit
      }
  }
};
</script>
<style lang="less" scoped>
.cart-box {
  .cart-body {
    margin: 60px 0 100px 0;
    padding-left: 10px;
    .good-item {
      display: flex;
      .good-img {
        img {
          width: 100px;
          height: auto;
        }
        /deep/.van-checkbox{
            padding-top: 0;
        }
      }
      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 20px;
        padding-top: 0;
        .good-title{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        .good-btn{
             display: flex;
             justify-content: space-between;
             .price{
                 font-size: 14px;
                 color: red;
                 line-height: 28px;
             }
        }
      }
    }
    .van-icon-delete{
        font-size: 20px;
        margin-top: 4px;
        .delete-button{
        width: 50px;
        height: 100%;
    }
    }
    
  }
  .empty{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        margin-top: 200px;
        .empty-cart{
        width: 150px;
        margin-bottom: 20px;
        .van-icon-smile-o{
        font-size: 50px;
    }
    }
    .title{
        font-size: 16px;
        margin-bottom: 20px;
    }
    }
    .submit-all{
        margin-bottom: 60px;
    }
}
</style>